<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简单实用的jQuery左侧固定侧边栏插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="contentWrapper">

	    <div id="contentLeft">

	        <ul id="leftNavigation">

	            <li class="active">
	                <a href="#"><i class="fa fa-coffee leftNavIcon"></i> About us</a>
	                <ul>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Our History</a>
	                    </li>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Our Team</a>
	                    </li>
	                </ul>
	            </li>
	            <li>
	                <a href="#"><i class="fa fa-flask leftNavIcon"></i> Products</a>
	                <ul>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Garden</a>
	                    </li>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Office</a>
	                    </li>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Home</a>
	                    </li>
	                </ul>
	            </li>
	            <li>
	                <a href="#"><i class="fa fa-truck leftNavIcon"></i> Services</a>
	                <ul>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Garden</a>
	                    </li>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Office</a>
	                    </li>
	                    <li>
	                        <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Home</a>
	                    </li>
	                </ul>
	            </li>
	            <li class="clickable">
	                <a href="#"><i class="fa fa-envelope-o leftNavIcon"></i> Contact us</a>
	            </li>

	        </ul>

	    </div>

	    <div id="contentRight">

	       <header class="htmleaf-header">
				<h1>简单实用的jQuery左侧固定侧边栏插件 <span>A Sticky Sidebar Navigation with jQuery</span></h1>
				<div class="htmleaf-links">
					<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
					<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Menu-Navigation/201509122561.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
				</div>
			</header>

	        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequatur delectus eius laborum reprehenderit. A amet dignissimos explicabo maiores nisi nulla placeat quae reiciendis repudiandae tempora tempore, vero? Ea, optio?</p>
			
	    </div>

	</div>
	<div class="related">
	    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
	    <a href="http://www.htmleaf.com/css3/ui-design/201508102390.html">
		  <img src="related/1.jpg" width="300" alt="带隐藏侧边栏的垂直多面板UI界面布局"/>
		  <h3>带隐藏侧边栏的垂直多面板UI界面布局</h3>
		</a>
		<a href="http://www.htmleaf.com/html5/html5muban/201508022345.html">
		  <img src="related/2.jpg" width="300" alt="Material Design隐藏侧边栏网页布局模板"/>
		  <h3>Material Design隐藏侧边栏网页布局模板</h3>
		</a>
	</div>
	
	<script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/jquery.ssd-vertical-navigation.min.js"></script>
	<script src="js/app.js"></script>
</body>
</html>